<template>
  <div class="menu-wrapper">
    <!--    <company-dialog ref="officeDialog" @confirm="dialogConfirm" />-->
    <!--    <office-dialog ref="officeDialog" @confirm="officeConfirm"/>-->
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <div
        style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px"
      >
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">新增油库信息</span>
      </div>
      <el-form-item label="油库编码:" prop="code">
        <el-col :span="6">
          <el-input v-model="form.code" clearable/>
        </el-col>
      </el-form-item>
      <el-form-item label="油库名称:" prop="name">
        <el-col :span="6">
          <el-input v-model="form.name" clearable/>
        </el-col>
      </el-form-item>
      <!--<el-form-item label="所属企业:" prop="companyId">-->
      <!--<el-col :span="6">-->
      <!--<query-company  @queryCompanyClick='queryCompanyClick' :name="query.companyName"/>-->
      <!--</el-col>-->
      <!--</el-form-item>-->
      <el-form-item label="供 应 商 :" prop="customerId">
      <el-col :span="6">
      <query-supplier  @querySupplier='querySupplierClick' :supplierName="form.customerName"/>
      </el-col>
      </el-form-item>
      <!--<el-form-item label="油 库 ID :" prop="id">-->
      <!--<el-col :span="6">-->
      <!--<span disabled>{{form.id}}</span>-->
      <!--</el-col>-->
      <!--</el-form-item>-->
      <el-form-item label="联 系 人 :" prop="linkman">
        <el-col :span="6">
          <el-input v-model="form.linkman" clearable/>
        </el-col>
      </el-form-item>
      <el-form-item label="联系电话:" prop="phone">
        <el-col :span="6">
          <el-input v-model="form.phone" clearable/>
        </el-col>
      </el-form-item>
      <el-form-item label="所属城市:" prop="areaId">
      <el-col :span="6">
        <Distpicker @selected="onSelected" :province="query.province" :city="query.city" :area="query.area" style=""></Distpicker>
      </el-col>
      </el-form-item>
      <el-form-item label="详细地址:" prop="address">
        <el-col :span="6">
          <el-input v-model="form.address" clearable/>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="clicked" @click="save('form')">保 存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped>
.menu-wrapper {
  margin: 15px;
}
</style>
<script>
import {EventBus} from "@/api/eventBus";
import utils from "../../utils/utils.js";
import md5 from "js-md5";
// import Distpicker from "@/components/Distpicker/Distpicker";
import {save, find} from "@/api/warehouse";
import {find as companyList} from "@/api/company";
import {find as customerList} from "@/api/customer";


import QueryCompany from "@/components/Query/queryCompany";
import QuerySupplier from "@/components/Query/querySupplier";
import Distpicker from "@/components/Distpicker/Distpicker";


export default {
  name: "warehouse-add",

  components: {
    Distpicker,
    QuerySupplier,
    QueryCompany,
  },
  data() {
    return {
      companyList: [],
      customerList: [],
      pageNum: 1,
      pageSize: 20,
      query:{
        companyName: '',
        companyId: '',
        customerId: '',
        customerName: '',
        areaName:'',
        province:'',
        city:'',
        area:''
      },
      // companyName: this.$route.query.companyName,
      // companyId: this.$route.query.companyId,
      // customerId: this.$route.query.customerId,
      // customerName: this.$route.query.customerName,
      clicked: false, // 按钮防双击
      form: {
        name: "",        //公司名称
        code: "",         //公司Logo
        areaId:'',
        address: "",	    //详情地址
        linkman: "",	    //联系人
        phone: "",        //联系电话
        companyId: '',    //所属公司
        customerId: '',     //供应商
      },
      rules: {
        name: [
          { required: true, message: "请输入油库名称", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ],
        code: [
          { required: true, message: "请输入油库编码", trigger: "blur" }
        ],
        linkman: [
          { required: true, message: "请输入联系人", trigger: "blur" }
        ],
        phone: [
          { required: true, pattern: /^1(3|4|5|7|8)\d{9}$/,  message: "请输入正确的联系电话", trigger: "blur" }
        ],
//        companyId: [
//          { required: true, message: "请选择所属账户", trigger: "blur" }
//        ],
        customerId:[
          { required: true, message: "请选择供应商", trigger: "blur"}
        ],
        address:[
          { required: true, message: "请输入详情地址", trigger: "blur"}
        ],

        // msg:[
        //   { required: true, message: "请输入详情地址", trigger: "blur"}
        // ],
      },

    };
  },
  created() {
    var _this = this;
    _this.getArea();
  },
  watch: { // 路由地址不变的情况下,如果id变化则重新获取数据

    // },
//    warehouseName(newVal, oldVal) {
//      this.form.warehouseName = newVal;
//    }
  },
  methods: {
//    remoteMethod(query) {
//      // this.queryCompanyClick()
//      // this.queryCustomer(query)
//      // this.querySupplier()
//    },
    querySupplierClick(item){
      console.log("选择1",item)
      this.form.customerId = item.id
      this.form.customerName = item.name
    },
    queryCompanyClick(item){
      console.log("选择3",item)
      this.form.companyId = item.id
      this.form.companyName = item.name
      console.log("选择所属公司",item,this.query.companyName)
    },
    onSelected(val) {
      console.log(val,'areaId')
      if (!utils.isNull(val.area) && !utils.isNull(val.area.code)) {
        this.form.areaId = val.area.code;
      }
    },

    save(form) {
      const _this = this;
      console.log("form",this.$refs[form].model);
      // console.log("点击创建了", this.$refs[form],)
      this.$refs[form].validate(valid => {
        console.log("点击创建了", valid)
        if (valid) {
          // 校验表单
          var list = {
            name :_this.form.name ,
            code : _this.form.code ,
            customerId :_this.form.customerId ,
            linkman :_this.form.linkman ,
            phone :_this.form.phone ,
            areaId : _this.form.areaId ,
            address :_this.form.address ,
          }
          _this.clicked = true;
          save(list)
            .then(response => {
              _this.clicked = false;
              if (response.type == "success") {
                let data = response.data;
//                console.log("修改完返回给列表的数据--" + JSON.stringify(data));
                EventBus.$emit("warehouse-edit", data);
                _this.$store
                  .dispatch("tagsView/delView", _this.$route)
                  .then(({visitedViews}) => {
                    _this.$router.push({
                      path: "/warehouse/list",
                      query: {id: _this.form.id, warehouseName: _this.form.name}
                    });
                  }); // 关闭当前tab回到列表
              } else {
                _this.$message({
                  message: response.content,
                  offset: 120,
                  center: true
                });
                console.log("content",response.content);

              }
            })
            .catch(error => {
              _this.clicked = false;
            });
        } else {
          return false;
        }
      });
    },

    //过滤成日期
    formatDate2Day(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    },

    //过滤到时间
    formatDate2Time(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },

    //过滤企业列表
    formatList(data) {
      data.createDate = this.formatDate2Day(data.createDate);
      data.modifyDate = this.formatDate2Time(data.modifyDate);
      data.rechangeDate = this.formatDate2Time(data.rechangeDate);
      return data;
    },
  }
};
</script>
